<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item :label="$t('user.menuManagement.menuName')" prop="menuName">
        <el-input
          v-model="form.menuName"
          clearable
          :placeholder="$t('user.menuManagement.menuName')"
        />
      </el-form-item>
      <el-form-item :label="$t('user.menuManagement.menuStatus')" prop="state">
        <el-select v-model="form.state" :placeholder="$t('common.chooseText')">
          <el-option
            v-for="item in seletcArry"
            :key="item.value"
            :label="item.txt"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="checkList"
          v-permission="['system:menu:get']"
          >{{ $t("common.queryText") }}</el-button
        >
        <el-button
          type="primary"
          @click="handleAdd(null)"
          v-permission="['system:menu:add']"
          v-env="['development']"
          >{{ $t("common.add") }}</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      ref="tableRef"
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @command="handleAction"
    >
      <template #menuIcon="{ row }">
        <hcSvg :name="row.menuIcon || 'fenlei'" />
      </template>
      <template #menuType="{ row }">
        <el-tag v-if="row.menuType === 0" type="success">{{
          $t("user.menuManagement.content")
        }}</el-tag>
        <el-tag v-if="row.menuType === 1">{{
          $t("user.menuManagement.menu")
        }}</el-tag>
        <el-tag v-if="row.menuType === 2" type="warning">{{
          $t("user.menuManagement.button")
        }}</el-tag>
      </template>
      <template #state="{ row }">
        <div class="flex-a-c">
          <div
            class="state-icon"
            :class="[row.state ? 'state-start' : 'state-stop']"
          ></div>
          <span style="padding-left: 8px">{{
            row.state ? $t("common.enable") : $t("common.disable")
          }}</span>
        </div>
      </template>
      <template #isShow="{ row }">
        <div class="flex-a-c">
          <div
            class="state-icon"
            :class="[row.isShow ? 'state-start' : 'state-stop']"
          ></div>
          <span style="padding-left: 8px">{{
            row.isShow ? $t("common.show") : $t("common.hide")
          }}</span>
        </div>
      </template>
      <template #creationTime="{ row }">
        {{ formatTime(row.creationTime) }}
      </template>
    </hcTable>
    <!-- 新增 / 编辑 菜单 -->
    <menu-dialog
      :isEdit="isEdit"
      :visible="visible"
      :curMenu="curItem"
      :treeMenu="list"
      @onSure="onSure"
      @onCancel="(visible = false), (curItem = null), (isEdit = false)"
    />
  </div>
</template>

<script setup name="Menu">
import { reactive, ref, toRefs, computed } from "vue";
import useTable from "@/hooks/useTable";
import { formatTime } from "@/utils";
import MenuDialog from "./components/menu-dialog.vue";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();

const { list, loading, getList, addFun, updateFun, deleteFun } = useTable(
  "/Menu",
  false
); // false 不要分页

const formRef = ref();

const tableColumn = [
  { type: "index", width: "50", label: "No.", align: "center", fixed: true },
  {
    prop: "menuName",
    label: $t("user.menuManagement.menuName"),
    showOverflowTooltip: true,
    fixed: true,
  },
  {
    prop: "menuIcon",
    width: "100",
    label: $t("user.menuManagement.menuIcon"),
    slot: "menuIcon",
  },
  {
    prop: "orderNum",
    label: $t("user.menuManagement.menuOrder"),
    width: "80",
  },
  {
    prop: "permissionCode",
    label: $t("user.menuManagement.permissionCode"),
    showOverflowTooltip: true,
  },
  {
    prop: "router",
    label: $t("user.menuManagement.routePath"),
    showOverflowTooltip: true,
  },
  {
    prop: "menuType",
    width: "120",
    label: $t("user.menuManagement.menuType"),
    slot: "menuType",
  },
  {
    prop: "isShow",
    label: $t("user.menuManagement.displayStatus"),
    width: "120",
    slot: "isShow",
  },
  {
    prop: "state",
    label: $t("user.menuManagement.menuStatus"),
    width: "120",
    slot: "state",
  },
  {
    prop: "creationTime",
    label: $t("user.menuManagement.createTime"),
    slot: "creationTime",
    showOverflowTooltip: true,
  },
  {
    width: "180",
    label: $t("common.operate"),
    align: "center",
    fixed: "right",
    buttons: [
      {
        name: $t("common.add"),
        type: "primary",
        command: "add",
        // permission: ["system:menu:add"],
      },
      {
        name: $t("common.edit"),
        type: "warning",
        command: "edit",
        // permission: ["system:menu:edit"],
      },
      {
        name: $t("common.delText"),
        type: "danger",
        command: "delete",
        // permission: ["system:menu:del"],
      },
    ],
  },
];

const data = reactive({
  // 绑定数据
  form: {
    menuName: "",
    state: "",
  },
  seletcArry: [
    { txt: $t("common.all"), value: "" },
    { txt: $t("common.normal"), value: true },
    { txt: $t("common.disable"), value: false },
  ],
  visible: false,
  isEdit: false, // 默认新增
  curItem: null,
});

const options = computed(() => {
  return {
    loading: loading.value,
    // showPagination: true,
    rowKey: "id",
    defaultExpandAll: false,
    border: true,
  };
});

const params = computed(() => {
  let form = JSON.parse(JSON.stringify(data.form));
  Object.keys(form).forEach((key) => {
    if (form[key] === null) {
      form[key] = "";
    }
  });
  return {
    ...form,
  };
});

const handleAction = (command, row) => {
  switch (command) {
    case "add":
      handleAdd(row);
      break;
    case "edit":
      data.curItem = row;
      data.isEdit = true;
      data.visible = true;
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};

// 点击查询
const checkList = () => {
  getList(params.value);
};
const handleAdd = (row) => {
  data.curItem = row;
  data.isEdit = false;
  data.visible = true;
};

const onSure = (opt) => {
  if (data.isEdit) {
    // 编辑菜单
    updateFun(opt.curMenuId, opt.params).then(() => {
      data.isEdit = false;
    });
  } else {
    // 新增菜单
    addFun(opt.params);
  }
};

// 删除
const handlerDel = (item) => {
  deleteFun([item]);
};

const { form, visible, curItem, isEdit, seletcArry } = toRefs(data);
</script>

<style lang="scss" scoped></style>
